<template>
  <main class="w-full h-full dark:bg-black p-4">
    <use-table
      :all-data="allData"
      :loading="loading"
      :columns="columns"
      v-model:selectedRowKey="selectedRowKey"
      :total="total"
      :search-select-option="searchSelectOption"
      :personalized="true"
      @delete-select-user="deleteJudge"
      @modify-user-data="restoreJudge"
    >
      <template #title> 判断题回收站 </template>
      <template #function>
        <a-tooltip placement="bottom">
          <template #title>
            <span>恢复选中题目</span>
          </template>
          <div class="cursor-pointer text-lg text-blue-500 mr-2" @click="restoreJudge">
            <diff-outlined />
          </div>
        </a-tooltip>
        <a-tooltip placement="bottom">
          <template #title>
            <span>删除选中题目</span>
          </template>
          <div class="cursor-pointer text-lg text-red-500" @click="deleteJudge">
            <close-circle-outlined />
          </div>
        </a-tooltip>
      </template>
      <template #isModify>
        <plus-circle-outlined />
      </template>
    </use-table>
  </main>
</template>

<script setup lang="ts">
  import { JudgeData } from '@/utils/interface';
  import { getAllJudges, recycleJudge, deleteJudge as deleteSelectJudge } from '@/api/examination';
  import { CloseCircleOutlined, DiffOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  // 搜索框下拉列表
  const searchSelectOption: { value: string; label: string }[] = [
    {
      value: 'major_name',
      label: '专业名称',
    },
    {
      value: 'subject_name',
      label: '科目名称',
    },
    {
      value: 'judge_name',
      label: '题目名称',
    },
  ];
  // 勾选的数据的key
  let selectedRowKey = ref<number[] | string[]>([]);
  const columns = [
    {
      title: '题目名称',
      dataIndex: 'judge_name',
      align: 'center',
      width: 360,
      ellipsis: true,
    },
    {
      title: '正确答案',
      dataIndex: 'show_key',
      align: 'center',
      width: 80,
      ellipsis: true,
    },
    {
      title: '所属科目',
      dataIndex: 'subject_name',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '所属专业',
      dataIndex: 'major_name',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '添加时间',
      dataIndex: 'add_time',
      align: 'center',
      ellipsis: true,
      sorter: (a, b) => a.add_time - b.add_time,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
      width: 140,
    },
  ];
  let allData = ref<JudgeData[]>([]);
  let loading = ref(false);
  let total = ref(0);
  const getJudgesList = async () => {
    loading.value = true;
    const { data } = await getAllJudges();
    allData.value = data.filter((item) => item.status === 0);
    allData.value.forEach((item) => {
      item.show_key = Number(item.right_key) === 0 ? '错误' : '正确';
    });
    total.value = allData.value.length;
    loading.value = false;
  };
  getJudgesList();

  const deleteJudge = async (key: number[] | any) => {
    const selectKey = Array.isArray(key) ? key : selectedRowKey.value;
    if (selectKey.length === 0) {
      message.warning('请选择要删除的题目');
      return;
    }
    const res = (await deleteSelectJudge(selectKey)) as any;
    if (res.status === 200) {
      message.success(res.msg);
      getJudgesList();
    }
  };
  const restoreJudge = async (key: number | any) => {
    const selectKey = Number.isInteger(key) ? [key] : selectedRowKey.value;
    if (selectKey.length === 0) {
      message.warning('请选择要恢复的题目');
      return;
    }
    const { status, msg } = (await recycleJudge(selectKey)) as any;
    if (status === 200) {
      message.success(msg);
      getJudgesList();
    }
  };
</script>
